<template>
  <el-table :data="filterTableData" :stripe="prop.option.stripe" :border="prop.option.border"
    :row-class-name="tableRowClassName" loading height="620px">
    <el-table-column type="index">
    </el-table-column>
    <template v-for="(column, index) in    prop.option.columnName   ">
      <el-table-column :label="column.columnName" :prop="column.name" :key="index"
        v-if="column.name != 'status' && column.show">
      </el-table-column>
      <el-table-column :label="column.columnName" :prop="column.name" :key="index"
        v-if="column.name == 'status' && column.show" :filters="[
    { text: '启用', value: 1 }, { text: '暂停', value: 0 },]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" disable-transitions>
            {{ scope.row.status === 1 ? "启用" : "暂停" }}
          </el-tag>
        </template>
      </el-table-column>
    </template>
    <el-table-column align="right">
      <!-- 搜索栏 -->
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <!-- 操作栏 -->
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
          icon-color="#626AEF" title="Are you sure to delete this?" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button size="small" type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { ref, computed } from "vue";
import { User } from "@/typings/user";
import { DelUser } from '@/api/login'
//elementPlus 的table组件
const prop = defineProps<{
  option: any;
}>();

//@ts-ignore
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User;
  rowIndex: number;
}) => {
  // if (row.sex === 1) {
  //   return "warning-row";
  // } else if (row.sex === 0) {
  //   return "success-row";
  // }
  return "";
};
const search = ref("");
const filterTableData = computed(() =>
  prop.option.data.filter(
    (data: any) =>
      !search.value ||
      data.username.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
  DelUser(row.id);
};
const filterTag = (value: string, row: User) => {
  return row.status.toString() == value;
};
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
